<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput class="w-50" v-model="form.sku" placeholder="SKU/自定义SKU"></multiInput>
        <multiInput class="w-50" v-model="form.tracking_number" placeholder="快递单号"></multiInput>
        <multiInput class="w-50" v-model="form.receipt_number" placeholder="采购单号"></multiInput>
        <multiInput class="w-50" v-model="form.supplier_code" placeholder="供应商代码"></multiInput>
        <SelectWarehouse class="selectClass" v-model="form.warehouse_id" :multiple="true" placeholder="目的仓库">
        </SelectWarehouse>
        <el-select v-model="form.stock_method" placeholder="下单方式">
          <el-option v-for="item in options['stockin.factoryOrder']?.[0].stockMethod" :key="item.value"
            :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <VGroup>
          <el-select class="selectClass" v-model="form.personRange.type" style="max-width: 150px">
            <el-option v-for="item in personOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <select-personnel v-model="form.personRange.value"></select-personnel>
        </VGroup>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 150px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()"
            style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="handleQuality()">外验操作</el-button>
        <div class="flex ml-auto">
          <div class="mr-3 flex items-center"><span class="total-round mr-1"></span><span class="text-[#666666] mr-1">
              待验货</span><span class="text-bold text-[#333333]">{{ ready_qc }}</span></div>
        </div>
        <el-button type="" @click="handleExport()"><svg-icon icon-class="import" />导出</el-button>
      </template>
    </VTable>
    <ComModal ref="ComModalRef" :options="options" @query="query"></ComModal>
    <DialogImage ref="DialogImageRef"></DialogImage>
    <DialogPhotograph ref="DialogPhotographRef" @success="successImage"></DialogPhotograph>
    <derived-center ref="DerivedCenterRef"></derived-center>
  </VPage>
</template>
<script setup name="StorageQc-order" lang="jsx">
import { ElMessage } from 'element-plus'
import { ref, reactive, toRefs } from 'vue'
import { getEnums } from '@/api/public'
import { queryListOrder } from './api'
import { getWareData } from '@/api/public'
import ComModal from './components/ComModal.vue'
import multiInput from '@/components/multiInput';
import SelectWarehouse from '@/components/SelectWarehouse'
import DialogImage from '@/components/DialogImage/index.vue'
import DialogPhotograph from '@/components/DialogPhotograph/index.vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()

const personOption = [
  { label: "采购员", value: "purchase_user_id" },
  { label: "QA质检员", value: "qa_user_id" },
]

const timeOption = [
  { label: "需求验货时间", value: "required_qc_time" },
  { label: "QA预计验货时间", value: "qa_estimate_time" },
]


const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: '70' },
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      personRange: { type: 'purchase_user_id', value: [], range: true },
      timeRange: { type: 'required_qc_time', value: [], range: true },
    }
  },
  tooltipConfig: {
    showAll: false
  },
  isToggle: true,
  columns: [
    { type: 'checkbox', width: 50, fixed: 'left' },
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'stock_method_cn', title: '类型', width: 100
    },
    {
      field: 'qc_order_no', title: '采购单/采购人员', width: 180, slots: {
        default: ({ row }) => {
          return <div>
            <div class="base-text-color cursor-pointer"> {row.receipt_number} </div>
            <div>{row.purchase_user}</div>
            <div>{row.warehouse_name}</div>
            <div>{row.country} </div>
          </div>
        }
      }
    },
    {
      field: 'sku', title: 'SKU', width: 220, slots: {
        default: ({ row }) => {
          return <div>
            <div>SKU：{row.sku} </div>
            <div>下单数量：{row.num} </div>
          </div>
        }
      }
    },
    {
      field: 'sku_cn_title', title: '产品名称', width: 220, slots: {
        default: ({ row }) => {
          return <div class='flex flex-col'>
            <el-tooltip effect="dark" content={row.sku_cn_title} placement="top">
              <div class="overflow-line3 text-[#333333]" style="width:200px">{row.sku_cn_title}</div>
            </el-tooltip>
          </div>
        }
      }
    },
    {
      field: 'scm_qc_num', title: '验货数量', width: 100
    },
    {
      field: 'supplier_code', title: '供应商代码', width: 100
    },
    {
      field: 'supplier_address', title: '供应商地址', width: 160
    },
    {
      field: 'create_time', title: '联系人/联系电话', width: 160, slots: {
        default: ({ row }) => {
          return <div>
            <div>{row.supplier_contacts} </div>
            <div>{row.supplier_phone} </div>
          </div>
        }
      }
    },
    {
      field: 'receive_user', title: '发货信息', width: 200, slots: {
        default: ({ row }) => {
          return <div>
            <div>发货单号：{row.shipment_order_no} </div>
            <div>发货数量：{row.shipment_num} </div>
            <div>预计发货：{row.shipment_time} </div>
            <div class="base-text-color cursor-pointer">标签信息 </div>
          </div>
        }
      }
    },
    {
      field: 'required_qc_time', title: '需求验货时间', width: 160
    },
    {
      field: 'qa_estimate_time', title: 'QA预计验货时间', width: 180
    },
    {
      field: 'qa_user', title: 'QA质检人员', width: 160
    },
    {
      field: 'channel', title: '渠道', width: 120
    },
    {
      field: 'qc_status_cn', title: '验货状态', width: 100
    },
    {
      field: 'purchase_remark', title: '采购备注', width: 120
    },
    {
      field: 'qc_remark', title: '质检备注', width: 120
    },
    {
      title: '操作', width: "110", fixed: "right", slots: {
        default: ({ row }) => {
          return <div class="table-option">
            <div>
              <el-button type="primary" link onClick={() => handlePhotograph(row.id)}>上传</el-button>
              <el-button type="primary" link onClick={() => handleViewImage(row.id)}>查看</el-button>
            </div>
          </div >
        }
      }
    }
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data.list',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryListOrder({ ...form, ...page })
        ready_qc.value = res.data.ready_qc
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})
const query = () => {
  tableRef.value.query()
}

const data = reactive({
  options: [],
  wareDataList: [],
  ready_qc: 0
})
const { options, wareDataList, ready_qc } = toRefs(data)

// 获取枚举类
const fetchOption = async () => {
  getEnums({
    version: "v1", "name": [
      "stockin.factoryOrder"
    ]
  }).then(res => {
    options.value = res.data
  })
}
fetchOption()

//获取已选中的行
const getSelectRow = () => {
  return tableRef?.value.$table.getCheckboxRecords()
}

const handleQuality = (row) => {
  const records = getSelectRow()
  if (records.length != 1) {
    ElMessage.error('只能勾选一项')
    return
  }

  router.push({
    path: '/storage/quality-testing',
    query: {
      detail_id: records[0].detail_id,
      type: 'qc-factory'
    }
  })
}

const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 59,
    tag_name: 'wms',
    condition
  })
}
const DialogPhotographRef = ref()
const handlePhotograph = (id) => {
  DialogPhotographRef.value.open(4, id)
}

const DialogImageRef = ref()
const handleViewImage = (id) => {
  DialogImageRef.value.open(4, id)
}

</script>
<style>
.total-round {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #3487FF;
  border-radius: 50%;
}
</style>